<template>
	<view class="search">
		<view class="top">
			<view class="searchBox">
				<image class="iconSearch" src="../../../../static/icon_search_hui@2x.png" mode=""></image>
				<input type="text" :value="keyword" @input="search" @confirm="submit"/>
				<image class="btnClear" src="../../../../static/btn_clear@2x.png" mode="" @click="btnClear"></image>
			</view>
			<text @click="cancel">取消</text>
		</view>
		<view class="tab1" v-if="!searchSuccess">
			<view class="hotSearch clearfix">
				<text class="title">热门搜索</text>
				<view class="searchTags clearfix">
					<view class="searchTag" v-for="(item, index) in hotSearch" :key="index" v-if="index<6" :data-id="item.bid" @click="tobook">
						<image v-if="index == 0" class="icon" src="../../../../static/sign_1.png" mode=""></image>
						<image v-if="index == 1" class="icon" src="../../../../static/sign_2.png" mode=""></image>
						<image v-if="index == 2" class="icon" src="../../../../static/sign_3.png" mode=""></image>
						<image v-if="index == 3" class="icon" src="../../../../static/sign_4.png" mode=""></image>
						<image v-if="index == 4" class="icon" src="../../../../static/sign_5.png" mode=""></image>
						<image v-if="index == 5" class="icon" src="../../../../static/sign_6.png" mode=""></image>
						<text>{{item.bookname}}</text>
					</view>
				</view>
			</view>
			<view class="lastSearch clearfix">
				<view class="title clearfix">
					<text>最近搜索</text>
					<image @click="clearJL" src="../../../../static/icon_sc@2x.png" mode=""></image>
				</view>
				<view class="searchLository clearfix">
					<text v-for="(item, index) in ssjl" :key="index" :data-name="item" @click="clickSearch">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="searchList" v-if="searchSuccess">
			<block v-for="(item, index) in searchList" :key="index">
				<view class="landscapeBook" :data-id="item.bid" @click="tobook">
					<image :src="item.img" mode=""></image>
					<!-- <lazy-image class="lazy-image" :realSrc="item.bookimg" :placeholdSrc="placeholderSrc"></lazy-image> -->
					<view class="textIntroducte">
						<text class="title">{{item.bookname}}</text>
						<text class="introducte">{{item.desc}}</text>
						<text class="author">{{item.bookauthor}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import key from '@/common/key.js';
	import utils from '@/common/utils.js';
	import lazyImage from "@/components/turboni-lazyload/lazy-image.vue"
	export default {
		data() {
			return {
				searchSuccess: false,
				placeholderSrc:'../../../static/logo.png',
				hotSearch: [],
				searchList: [],
				keyword: '',
				ssjl: []
			}
		},
		created() {
			this.loadFn();
			var ssjl = uni.getStorageSync('ssjl');
			this.ssjl = ssjl;
		},
		components: {
			lazyImage
		},
		methods: {
			loadFn(){
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0"
				}
				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a3/hot/hunt`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							this.hotSearch = res.data.data;
						}
					}
				})
			},
			search(e){
				this.keyword = e.detail.value;
				console.log(this.keyword);
			},
			submit(){
				console.log(this.keyword);
				// return false
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"keyword": this.keyword
				}
							
				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a3/hunt`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"keyword": this.keyword,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							console.log(res);
							res.data.data.forEach((val, index, arr) => {
								val.bookimg = utils.imgMd5(val.bookimg);
							})
							this.searchList = res.data.data;
							this.searchSuccess = true;
							this.saveJL(this.keyword)
						}
					}
				})
			},
			clickSearch(e){
				var keywordC = e.currentTarget.dataset.name; 
				this.keyword = keywordC;
				this.submit();
			},
			saveJL(keyword){
				if(this.ssjl.length ==0){
					this.ssjl = [keyword]
				} else {
					var ifSave = true;
					this.ssjl.forEach((val, index, arr) => {
						if(val == keyword){
							ifSave = false;
						}
					})
					if(ifSave){
						this.ssjl.unshift(keyword);
					}
				}
				uni.setStorageSync('ssjl', this.ssjl);
			},
			btnClear(){
				this.keyword = '';
			},
			tobook(e){
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/childPages/bookDetail/bookDetail?book_id=' + id
				})
			},
			cancel(){
				this.keyword = '';
				this.searchSuccess = false;
				this.searchList = [];
				uni.navigateBack({
					delta: 1
				})
			},
			clearJL(){
				uni.removeStorageSync('ssjl');
				this.ssjl = '';
			},
		}
	}
</script>

<style scoped>
	.search{
		width: 100%;
	}
	.top{
		width: 100%;
		height: 100upx;
	}
	.top text{
		float: right;
		margin-right: 30upx;
		font-size: 30upx;
		color: #818298;
		margin-top: 20upx;
		line-height: 60upx;
	}
	.searchBox{
		width: 600upx;
		height: 60upx;
		background: url(../../../../static/Search_Bar.png) 100% 100%;
		position: relative;
		margin-top: 20upx;
		margin-left: 30upx;
		float: left;
	}
	.searchBox image{
		float: left;
		width: 28upx;
		height: 28upx;
		margin-left: 26upx;
		margin-top: 18upx;
	}
	.searchBox input{
		width: 470upx;
		height: 100%;
		border: none;
		outline: none;
		position: absolute;
		left: 68upx;
		top: 0;
		font-size: 28upx;
		color: #4B4C5D;
		line-height: 60upx;
	}
	.searchBox .btnClear{
		float: right;
		margin-left: 0;
		margin-right: 30upx;
	}
	.hotSearch{
		width: 690upx;
		margin: 0 auto;
		height: auto;
		margin-top: 20upx;
	}
	.hotSearch .title{
		font-size: 30upx;
		color: #818298;
		line-height: 42upx;
	}
	.searchTags{
		width: 100%;
	}
	.searchTags .searchTag{
		width: 50%;
		float: left;
		margin-top: 30upx;
	}
	.searchTags .searchTag text{
		font-size: 30upx;
		color: #4B4C5D;
		float: left;
		width: 260upx;
		line-height: 32upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.searchTags .searchTag .icon{
		margin-right: 16upx;
		width: 32upx;
		height: 32upx;
		float: left;
	}
	.firstIcon1{
		/* color: #; */
	}
	.lastSearch{
		width: 690upx;
		margin: 0 auto;
		margin-top: 40upx;
	}
	.lastSearch .title{
		width: 100%;
	}
	.lastSearch .title text{
		font-size: 30upx;
		color: #818298;
		float: left;
		line-height: 42upx;
	}
	.lastSearch .title image{
		float: right;
		width: 40upx;
		height: 40upx;
	}
	.searchLository{
		width: 100%;
		height: auto;
	}
	.searchLository text{
		float: left;
		font-size: 30upx;
		color: #B4B3C2;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		padding: 0 26upx;
		background:rgba(246,246,247,1);
		border-radius: 8px;
		margin-right: 30upx;
		margin-top: 30upx;
	}
	.searchList{
		width: 690upx;
		margin: 0 auto;
	}
	.searchList .landscapeBook{
		width: 100%;
		height: 200upx;
		overflow: hidden;
		margin-top: 40upx;
	}
	.searchList .landscapeBook:first-child{
		margin-top: 20upx;
	}
	.searchList .landscapeBook image{
		float: left;
		width: 150upx;
		height: 200upx;
	}
	.lazy-image{
		width: 150upx;
		margin: 0;
		float: left;
	}
	.searchList .landscapeBook .textIntroducte{
		width: 520upx;
		float: right;
	}
	.searchList .landscapeBook .textIntroducte text{
		display: block;
		width: 100%;
		float: left;
	}
	.searchList .landscapeBook .textIntroducte text.title{
		font-size: 30upx;
		color: #4B4C5D;
		margin-top: 6upx;
	}
	.searchList .landscapeBook .textIntroducte text.introducte{
		font-size: 28upx;
		color: #818295;
		margin-top: 14upx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal !important;
	}
	.searchList .landscapeBook .textIntroducte text.author{
		font-size: 24upx;
		color: #B3B3C1;
		margin-top: 24upx;
	}
</style>
